.list {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;

    .list-item {
        width: 160px;
        height: 200px;
        margin-bottom: 10px;
        position: relative;
        cursor: pointer;
        overflow: hidden;

        &:hover .list-open {
            transform: translateX(0px);
        }

        &:hover .play-count {
            transform: translateY(-20px);
        }
        &:hover .list-item-description {
            transform: translateY(40px);
        }
        .play-count {
            position: absolute;
            color: #fff;
            top: 0;
            width: 100%;
            text-align: right;
            background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
            z-index: 20;
            transition: all 0.5s;

            .music-icon {
                color: #fff;
                margin-right: 5px;
            }
        }

        .list-item-description {
            position: absolute;
            top: -40px;
            color: #fff;
            width: 100%;
            height: 40px;
            overflow: hidden;
            text-overflow: ellipsis;
            background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            transition: all 0.5s;
        }

        img {
            width: 160px;
            height: 160px;
        }

        .list-open {
            font-size: 25px;
            position: absolute;
            bottom: 50px;
            left: 10px;
            color: #3085e7;
            transform: translateX(-50px);
            transition: all 0.5s linear;
        }
    }
}